import { AsyncDataComponent } from './async-data/async-data.component';
import { AsyncSubnodeComponent } from './async-subnode/async-subnode.component';
import { BasicComponent } from './basic/basic.component';
import { CheckboxSelectionComponent } from './checkbox-selection/checkbox-selection.component';
import { DragComponent } from './drag/drag.component';
import { FilterSelectedComponent } from './filter-selected/filter-selected.component';
import { SortAndFilterComponent } from './sort-and-filter/sort-and-filter.component';
import { VirtualScrollDragComponent } from './virtual-scroll-drag/virtual-scroll-drag.component';
import { VirtualScrollSubnodeComponent } from './virtual-scroll-subnode/virtual-scroll-subnode.component';
import { VirtualScrollWithoutSubnodeComponent } from './virtual-scroll-without-subnode/virtual-scroll-without-subnode.component';

export const TreeTableConfig = {
  location: 'TreeTable',
  description: '提供关于页面层次结构的上下文信息',
  description_en: 'Provides contextual information of the page hierarchy',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/tree-table/basic/basic.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic use',
      demoDescription: '基础使用，树表api同表格',
      demoDescription_en: `Basic use, tree-table's api equals to table's.`,
    },
    {
      demo: AsyncDataComponent,
      codePath: 'showcase/tree-table/async-data/async-data.component',
      demoTitle: '常见异步数据使用',
      demoTitle_en: 'Common uses of asynchronous data',
      demoDescription: '常见异步数据使用',
      demoDescription_en: 'Common uses of asynchronous data',
    },
    {
      demo: SortAndFilterComponent,
      codePath: 'showcase/tree-table/sort-and-filter/sort-and-filter.component',
      demoTitle: '排序、过滤、分页',
      demoTitle_en: 'Sorting, filtering, paging',
      demoDescription: '排序、过滤、分页',
      demoDescription_en: 'Sorting, filtering, paging',
    },
    {
      demo: CheckboxSelectionComponent,
      codePath: 'showcase/tree-table/checkbox-selection/checkbox-selection.component',
      demoTitle: 'checkbox多选',
      demoTitle_en: 'Checkbox',
      demoDescription: '通过checkbox来实现多选目的。',
      demoDescription_en: 'Realise multiple selection by checkbox',
    },
    {
      demo: AsyncSubnodeComponent,
      codePath: 'showcase/tree-table/async-subnode/async-subnode.component',
      demoTitle: '子节点异步加载-多选-虚拟滚动',
      demoTitle_en: 'Asynchronous subnodes-Checkbox-Virtual scrolling',
      demoDescription: '子节点异步加载，通过checkbox来实现多选，虚拟滚动。',
      demoDescription_en: 'asynchronous loading of subnodes,Realise multiple selection by checkbox,virtual scrolling',
    },
    {
      demo: VirtualScrollWithoutSubnodeComponent,
      codePath: 'showcase/tree-table/virtual-scroll-without-subnode/virtual-scroll-without-subnode.component',
      demoTitle: '虚拟滚动（未包含子节点）',
      demoTitle_en: 'Virtual Scrolling (without child nodes)',
      demoDescription: '虚拟滚动（未包含子节点）',
      demoDescription_en: 'Virtual Scrolling (without child nodes)',
      devDebug: true,
    },
    {
      demo: VirtualScrollSubnodeComponent,
      codePath: 'showcase/tree-table/virtual-scroll-subnode/virtual-scroll-subnode.component',
      demoTitle: '虚拟滚动（包含子节点）',
      demoTitle_en: 'Virtual scrolling (including child nodes)',
      demoDescription: '虚拟滚动（包含子节点）',
      demoDescription_en: 'Virtual scrolling (including child nodes)',
    },
    {
      demo: DragComponent,
      codePath: 'showcase/tree-table/drag/drag.component',
      demoTitle: '拖拽-展开互斥',
      demoTitle_en: 'Drag',
      demoDescription: '拖拽改变顺序，只支持子项拖拽。',
      demoDescription_en: `Drag to change the sequence. Only sub-items can be dragged.`,
    },
    {
      demo: VirtualScrollDragComponent,
      codePath: 'showcase/tree-table/virtual-scroll-drag/virtual-scroll-drag.component',
      demoTitle: '虚拟滚动-拖拽-展开互斥',
      demoTitle_en: 'Virtual scrolling-Drag',
      demoDescription: '拖拽改变顺序，只支持子项拖拽。',
      demoDescription_en: `Virtual scrolling, drag to change the sequence. Only sub-items can be dragged.`,
    },
    {
      demo: FilterSelectedComponent,
      codePath: 'showcase/tree-table/filter-selected/filter-selected.component',
      demoTitle: '选中过滤',
      demoTitle_en: 'Filter and selected',
      demoDescription: '',
      demoDescription_en: ``,
    },
  ],
  snippet: `
  <lv-treetable [lvData]='\${1:data}' #lvTable>
    <thead>
        <tr>
            <th lvCellKey='\${2:Id}'>\${3:Id}</th>
        </tr>
    </thead>
    <tbody>
        <ng-container *ngTemplateOutlet='bodyContentTpl; context: { $implicit: lvTable.renderData, level: 0}'>
        </ng-container>

        <!-- template -->
        <ng-template #bodyContentTpl let-data let-level=level>
            <ng-container *ngFor='\${4:let item of data}'>
                <tr>
                    <td>{{\${5:item.data.id}}}</td>
                </tr>
                <ng-container *ngIf='\${6:item.expanded && item.children?.length}'>
                    <ng-container
                        *ngTemplateOutlet='bodyContentTpl; context: { $implicit: item.children, level: level+1}'>
                    </ng-container>
                </ng-container>
            </ng-container>
        </ng-template>
    </tbody>
  </lv-treetable>`,
  mApi: [
    {
      name: 'lv-treetable',
      name_en: 'lv-treetable',
      selector: 'lv-treetable',
      api: [
        {
          attribute: 'lvData',
          type: 'TreeTableNode[]',
          default: '[]',
          description: `源数据
          <ul>
            <li>[key: string] 键值，具有唯一性 (可选)</li>
            <li>[data: any] 表格数据 (可选)</li>
            <li>[disabled: boolean] 是否禁用，默认值 false (可选)</li>
            <li>[expanded: boolean] 是否展开子项 (可选)</li>
            <li>[children: TreeTableNode[]] 子项 (可选)</li>
            <li>[parent: TreeTableNode] 父项 (可选)</li>
            <li>[isLeaf: boolean[]] 是否为叶子节点 (可选)</li>
          </ul>`,
          description_en: 'data',
        },
        {
          attribute: 'lvSelectionAssociate',
          type: 'boolean',
          default: 'true',
          description: '选择关联，选中是否关联父子选中',
          description_en: 'Select association, select whether to associate parent and child',
        },
        {
          attribute: 'lvAsync',
          type: 'boolean',
          default: 'false',
          description: '是否为异步数据表格, 即后台表格',
          description_en: 'Whether is asynchronous data table.(backend table)',
        },
        {
          attribute: 'lvSortDirct',
          type: 'SortDirective',
          default: '',
          description: '关联sort指令，sortChange自动触发table数据变更',
          description_en: 'Associated with sort instruction, sortchange automatically triggers data change of the table.',
        },
        {
          attribute: 'lvPaginator',
          type: 'PaginatorComponent',
          default: '',
          description: '关联paginator组件，pageChange自动触发table数据变更',
          description_en: 'Associated with paginator component, pageChange automatically triggers data change of the table.',
        },
        {
          attribute: 'lvStripe',
          type: 'boolean',
          default: 'false',
          description: '是否展示斑马纹',
          description_en: 'Whether to display zebra-tripe',
        },
        {
          attribute: 'lvSize',
          type: '"default" | "large" | "small"',
          default: 'default',
          description: '表格大小',
          description_en: 'Size of the table',
        },
        {
          attribute: 'lvScroll',
          type: '{x?: string | null, y?: string | null}',
          default: '',
          description: '横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: "300px", y: "300px" }',
          description_en:
            'Rolling horizontally or vertically is supported. It can also be used to specify the width and height of rolling area: {x: "300px", x: "300px"}',
        },
        {
          attribute: 'lvLoading',
          type: 'boolean',
          default: 'false',
          description: '页面是否加载中',
          description_en: 'Whether the page is loading.',
        },
        {
          attribute: 'lvSelectionMode',
          type: '"single" | "multiple"',
          default: '"single"',
          description: '选择模式',
          description_en: 'Mode of selection',
        },
        {
          attribute: 'lvSelection',
          type: 'any[]',
          default: '[]',
          description: '双向绑定，默认选中项',
          description_en: 'Two-way binding, which is selected items by default',
        },
        {
          attribute: 'lvVirtualScroll',
          type: 'boolean',
          default: 'false',
          description: '是否支持虚拟滚动',
          description_en: 'Whether to support virtual scroll',
        },
        {
          attribute: 'lvVirtualItemSize',
          type: 'number',
          default: '48',
          description: '虚拟滚动时每一列的高度',
          description_en: 'Height of each column during virtual scroll',
        },
        {
          attribute: 'lvVirtualMaxBuffer',
          type: 'number',
          default: '200',
          description: '缓冲区最大像素高度',
          description_en: 'Maximum pixel height of buffer',
        },
        {
          attribute: 'lvVirtualMinBuffer',
          type: 'number',
          default: '100',
          description: '缓冲区最小像素高度',
          description_en: 'Minimum pixel height of buffer',
        },
        {
          attribute: 'lvResize',
          type: 'boolean',
          default: 'false',
          description: '是否支持表头拖动改变列宽',
          description_en: 'Whether to support drag the header to change column width',
        },
        {
          attribute: 'lvFake',
          type: 'boolean',
          default: '',
          description: '是否为傀儡table，如果为true表格无数据将不显示',
          description_en: 'Whether is fake table. If the value equals to true, table with no data will not be displayed.',
        },
      ],
      event: [
        {
          event: 'lvStateChange',
          parameter: ``,
          description: '表格条件变更回调',
          description_en: 'Table condition change back',
        },
        {
          event: 'lvSelectionChange',
          parameter: ``,
          description: '表格选中值变更回调',
          description_en: 'Table selected value change back',
        },
      ],
    },
    {
      name: 'td',
      name_en: 'td',
      selector: 'td',
      api: [
        {
          attribute: 'lvAlign',
          type: "'left' | 'right'",
          default: 'left',
          description: '标题对齐方式',
          description_en: 'Alignment of title',
        },
        {
          attribute: 'lvShowUnfold',
          type: 'boolean',
          default: 'false',
          description: '是否显示展开详情icon',
          description_en: 'Whether to show icons of unfolding',
        },
        {
          attribute: 'lvUnfold',
          type: 'boolean',
          default: 'false',
          description: '展开子项状态,支持双向绑定',
          description_en: 'Status of unfolded subitems, support two-way binding.',
        },
        {
          attribute: 'lvInnerUnfold',
          type: 'boolean',
          default: 'false',
          description: '是否为内嵌的内容',
          description_en: 'Whether is nested contant.',
        },
        {
          attribute: 'lvUnfoldEdit',
          type: 'boolean',
          default: 'false',
          description: '是否为复杂编辑状态',
          description_en: 'Whether is the status of complex editing',
        },
        {
          attribute: 'lvUnfoldToggleIcon',
          type: ' { true?: string; false?: string } | string',
          default: ` { true: 'triangle-down', false: 'triangle-up' }`,
          description: '展开详情切换icon',
          description_en: 'Whether to show icons of toggling',
        },
        {
          attribute: 'lvShowExpanded',
          type: 'boolean',
          default: 'false',
          description: '是否显示展开子项icon',
          description_en: 'Whether to show icons of unfolding subitems',
        },
        {
          attribute: 'lvExpanded',
          type: 'boolean',
          default: 'false',
          description: '展开子项状态,支持双向绑定',
          description_en: 'Status of unfolding subitems, support two-way binding.',
        },
        {
          attribute: 'lvExpandedToggleIcon',
          type: '{ true?: string; false?: string } | string',
          default: `{ true: 'lv-icon-treetable-unfold', false: 'lv-icon-treetable-fold'  }`,
          description: '展开子项切换icon',
          description_en: 'Icon of toggling unfolded subitems',
        },
        {
          attribute: 'lvShowCheckbox',
          type: 'boolean',
          default: 'false',
          description: '是否展示复选选框',
          description_en: 'Whether to show checkbox',
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '复选框是否可点',
          description_en: 'Whether to disable checkbox',
        },
        {
          attribute: 'lvRowData',
          type: '{ [key: string]: any }',
          default: '',
          description: '行数据',
          description_en: 'Row data',
        },
        {
          attribute: 'lvPaddingLeft',
          type: 'number | string',
          default: '0px',
          description: '自定义左边距，用于树表场景',
          description_en: 'Custom left margin, which is used for tree table scenarios.',
        },
      ],
      event: [
        {
          event: 'lvExpandedChange',
          parameter: ``,
          description: '节点展开变化回调',
          description_en: 'Node expansion change callback.',
        },
      ],
    },
    {
      name: 'th',
      name_en: 'th',
      selector: 'th',
      api: [
        {
          attribute: 'lvCellKey',
          type: 'string',
          default: '',
          description: '列主键',
          description_en: 'Column primary key',
        },
        {
          attribute: 'lvAlign',
          type: "'left' | 'right'",
          default: 'left',
          description: '标题对齐方式',
          description_en: 'Alignment of title',
        },
        {
          attribute: 'lvShowCheckbox',
          type: 'boolean',
          default: 'false',
          description: '是否展示复选框',
          description_en: 'Whether to show checkbox',
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '复选框是否可点',
          description_en: 'Whether to disable checkbox',
        },
        {
          attribute: 'lvRowsData',
          type: '{ [key: string]: any }[]',
          default: '',
          description: '渲染页可点击行数据,默认为renderData',
          description_en: 'Users can click the row data in the rendering page, and the default value is renderdata',
        },
        {
          attribute: 'lvShowSort',
          type: 'boolean',
          default: 'false',
          description: '是否展示排序按钮',
          description_en: 'Whether to display sort button',
        },
        {
          attribute: 'lvDefaultSort',
          type: 'PureSort',
          default: 'asc',
          description: '排序切换从什么序开始,默认先从升序开始',
          description_en: 'Sorting starts from what order, the default starts with ascending order',
        },
        {
          attribute: 'lvSortDirection',
          type: 'SortDirection',
          default: '',
          description: '关联排序组件',
          description_en: 'Associated sorting component',
        },
        {
          attribute: 'lvCustomSort',
          type: '<T>(data: T[] | null, sort: SortConfig) => T[] | null',
          default: '',
          description: '自定义排序',
          description_en: 'Custom sort',
        },
        {
          attribute: 'lvDisableSortClear',
          type: 'boolean',
          default: '--',
          description: '点击排序按钮，是否禁用清除排序',
          description_en: 'Whether sorting cannot be cleared when click sort button',
          global: true,
        },
        {
          attribute: 'lvShowFilter',
          type: 'boolean',
          default: 'false',
          description: '是否展示过滤按钮',
          description_en: 'Whether to display filter button',
        },
        {
          attribute: 'lvFilters',
          type: 'FilterItem[]',
          default: '[]',
          description: '过滤的条件',
          description_en: 'Condition of filter.',
        },
        {
          attribute: 'lvShowTips',
          type: 'boolean',
          default: 'false',
          description: '是否展示提示按钮',
          description_en: 'Whether to display prompt button',
        },
        {
          attribute: 'lvShowCustom',
          type: 'boolean',
          default: 'false',
          description: '是否展示自定义头',
          description_en: '	Whether to display custom header',
        },
      ],
      event: [
        {
          event: 'lvCheckChange',
          parameter: ``,
          description: '返回选中项',
          description_en: 'Return selected items',
        },
        {
          event: 'lvFilterChange',
          parameter: ``,
          description: '触发filter变化回调函数',
          description_en: 'Trigger callback function of filter.',
        },
      ],
    },
    {
      name: 'tr',
      name_en: 'tr',
      selector: 'tr',
      api: [
        {
          attribute: 'lvInnerUnfold',
          type: 'boolean',
          default: 'false',
          description: '是否为展开的行',
          description_en: 'Whether is unfolded row',
        },
        {
          attribute: 'lvUnfoldEdit',
          type: 'boolean',
          default: 'false',
          description: '是否为复杂编辑状态',
          description_en: 'Whether is in complex editable status',
        },
      ],
      event: [],
    },
  ],
};
